export class EqBall {
    /**
   * @param {String} containerId - 容器元素的ID
   * @param {number} x - 圆心 x 坐标
   * @param {number} y - 圆心 y 坐标
   * @param {Object} options - 配置选项
   * @param {number} options.radius - 半径
   * @param {string} options.startColor - 渐变起始颜色（如 '#FF0000'）
   * @param {string} options.endColor - 渐变结束颜色（如 '#0000FF'）
   */
    constructor(containerId, { radius = 10, startColor = '#FF0000', endColor = '#0000FF' } = {}) {
        this.containerId = containerId;
        this.radius = radius;
        this.startColor = startColor;
        this.endColor = endColor;
        this.init();
    }

    init() {
        this.createDOM();
        this.setupCanvas();
    }

    createDOM() {
        this.container = document.getElementById(this.containerId);

        const bgCanvas = document.createElement("canvas");
        bgCanvas.id = "eq_ball_canvas";
        bgCanvas.style.position = "absolute";
        bgCanvas.style.top = "0";
        bgCanvas.style.left = "0";
        bgCanvas.style.height = "100%";
        bgCanvas.style.width = "100%";
        bgCanvas.style.border = "none";
        bgCanvas.style.padding = "0";
        bgCanvas.style.margin = "0";
        bgCanvas.style.minWidth = "0px";
        bgCanvas.style.minHeight = "0px";
        bgCanvas.style.boxSizing = "border-box";
        bgCanvas.style.background = this.backgroundColor;
        bgCanvas.style.zIndex = "2";

        this.container.appendChild(bgCanvas);
    }

    setupCanvas() {
        this.bgCanvas = document.getElementById('eq_ball_canvas');
        // 关键修复：设置 Canvas 的像素宽高 = 容器的实际像素宽高
        this.bgCanvas.width = this.container.clientWidth;
        this.bgCanvas.height = this.container.clientHeight;
        this.ctx = this.bgCanvas.getContext("2d");
    }

    /** 绘制渐变圆球 */
    draw(x, y) {
        this.x = x ?? 0;
        this.y = y ?? 0;
        const gradient = this.ctx.createRadialGradient(
            this.x, this.y, 0,           // 内圆（圆心）
            this.x, this.y, this.radius  // 外圆
        );
        gradient.addColorStop(0, this.startColor);
        gradient.addColorStop(1, this.endColor);

        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = gradient;
        this.ctx.fill();
        this.ctx.closePath();
    }
    ///绘制文本
    drawText(text, { fontSize = "13px", textColor = "white" } = {}) {
        if (text) {
            this.ctx.font = `${fontSize} "Arial"`;
            this.ctx.fillStyle = textColor;
            this.ctx.textAlign = 'center';    // 水平居中
            this.ctx.textBaseline = 'middle'; // 垂直居中

            // 关键修复：考虑字体高度偏移
            const metrics = this.ctx.measureText(text);
            const verticalOffset = metrics.actualBoundingBoxAscent / 2;

            this.ctx.fillText(text, this.x, this.y);
        }
    }

    clear() {
        this.ctx.clearRect(0, 0, this.container.clientWidth, this.container.clientHeight);
    }

    /** 更新圆球位置和颜色（可选） */
    update(x, y, startColor, endColor) {
        this.x = x ?? this.x;
        this.y = y ?? this.y;
        this.startColor = startColor ?? this.startColor;
        this.endColor = endColor ?? this.endColor;
    }


}

export class EqBall3D extends EqBall {
    draw(x, y) {
        this.x = x ?? 0;
        this.y = y ?? 0;
        // 基础渐变
        // const baseGradient = this.ctx.createRadialGradient(
        //     this.x, this.y, 0, this.x, this.y, this.radius
        // );

        // 线性渐变（左上到右下）
        const baseGradient = this.ctx.createLinearGradient(
            this.x - this.radius, this.y - this.radius,
            this.x + this.radius, this.y + this.radius
        );

        baseGradient.addColorStop(0, this.startColor);
        baseGradient.addColorStop(1, this.endColor); // 边缘变暗

        // 高光渐变
        const highlightGradient = this.ctx.createRadialGradient(
            this.x - this.radius / 3, this.y - this.radius / 3, 0,
            this.x - this.radius / 3, this.y - this.radius / 3, this.radius / 2
        );

        highlightGradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
        highlightGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

        // 绘制
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = baseGradient;
        this.ctx.fill();

        // 叠加高光
        this.ctx.fillStyle = highlightGradient;
        this.ctx.fill();
    }
}

